<div class="al-modal-view">
  <!--<div class="modal-filter" ng-click="clearModal()"></div>-->
  <div>
    <div class="al-modal-title">{{modalTitle}}</div>
    <div class="al-modal-form-container">
      <table ng-table="tableParams" style="margin-bottom:20px;"
             class="table table-td-center table-bordered table-striped table-condensed al-table-container">
        <thead>
        <tr>
          <td>姓名</td>
          <td>身份证</td>
          <td>手机号</td>
          <td>性别</td>
          <td>民族</td>
          <td>职业</td>
          <td maxlength="100">地址</td>
          <td>身份证正面</td>
          <td>身份证反面</td>
          <td ng-if="type!='view'">操作</td>
        </tr>
        </thead>
        <tbody>
        <tr class="table-no-data" ng-if="$data.length==0">
          <td colspan="{{type=='view'?8:9}}">没有数据</td>
        </tr>
        <tr ng-repeat="item in $data">
          <td>{{item.customerName}}</td>
          <td>{{item.customerCard}}</td>
          <td>{{item.customerPhone}}</td>
          <td>{{item.sex|constantTransfer:modalAllSexList}}</td>
          <td>{{item.nation}}</td>
          <td>{{item.job}}</td>
          <td>{{item.address}}</td>
          <td><img width="50" ng-if="item.cardFront" ng-src="{{item.cardFront}}"></td>
          <td><img width="50" ng-if="item.cardFront" ng-src="{{item.cardBack}}"></td>
          <td ng-if="type!='view'">
            <button class="btn btn-sm btn-primary" ng-click="editPerson(item)">编辑</button>
            <button class="btn btn-sm btn-danger" ng-click="removePerson(item)">移除</button>
          </td>
        </tr>
        </tbody>
      </table>
      <ng-form name="newCotenantForm" class="form-horizontal form-validation" role="form" ng-if="type!='view'">
        <div class="form-group">
          <label class="control-label  col-sm-2">姓名<span class="attr-need">*</span></label>
          <div class="col-sm-3">
            <input type="text" class="form-control" ng-model="new.customerName"
                   required>
          </div>
          <label class="col-sm-3 control-label">手机号<span class="attr-need">*</span></label>
          <div class="col-sm-3">
            <input class="form-control" type="text" placeholder="住客手机号" required
                   ng-pattern="$root.phoneVd" ng-model="new.customerPhone">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2">身份证<span class="attr-need">*</span></label>
          <div class="col-sm-9">
            <input type="text" class="form-control"
                   ng-pattern="/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/"
                   ng-model="new.customerCard" required>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">性别</label>
          <div class="col-sm-3">
            <nobr>
              <label class="ui-radio" ng-repeat="option in modalSexList">
                <input name="sex" ng-value="option.value" type="radio" ng-model="new.sex">
                <span>{{option.name}}</span>
              </label>
            </nobr>
          </div>
          <label class="col-sm-3 control-label">民族</label>
          <div class="col-sm-3">
            <input class="form-control" type="text"
                   ng-model="new.nation">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">职业</label>
          <div class="col-sm-5">
            <input class="form-control" type="text"
                   ng-model="new.job">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">地址</label>
          <div class="col-sm-9">
            <input class="form-control" type="text"
                   ng-model="new.address">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">身份证正面</label>
          <div class="col-sm-3 id-card-container">
            <img ng-src="{{new.cardFront || 'images/id_card_front.jpg'}}"
                 ng-click="uploadImageData('#cco-idcard-front')">
            <input id="cco-idcard-front" style="display: none" type="file">
          </div>
          <label class="col-sm-3 control-label">身份证反面</label>
          <div class="col-sm-3 id-card-container">
            <img ng-src="{{new.cardBack || 'images/id_card_back.jpg'}}"
                 ng-click="uploadImageData('#cco-idcard-back')">
            <input id="cco-idcard-back" style="display: none" type="file">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-12 text-center">
            <button class="btn btn-success" ng-disabled="newCotenantForm.$invalid" ng-if="!editingItem"
                    ng-click="newPerson()">新增</button>
            <button class="btn btn-default" ng-if="editingItem"
                    ng-click="cancelEdit()">取消</button>
            <button class="btn btn-warning" ng-disabled="newCotenantForm.$invalid" ng-if="editingItem"
                    ng-click="saveEdit()">提交</button>
          </div>
        </div>
      </ng-form>
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-3">
            <button class="btn btn-default" ng-click="cancel()">取消</button>
          </div>
          <div class="col-sm-3">
            <button class="btn btn-primary" ng-click="confirm()">确认</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>